<template>
  <div>
    <!--搜索报表筛选表单-->
    <el-form :inline="true">
      <!--报表搜索输入框-->
      <el-form-item prop="searchReport" >
        <el-input v-model="temName" suffix-icon="el-icon-search" placeholder="请输入报表名" clearable></el-input>
      </el-form-item>
      <!--搜索按钮-->
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="load">搜索</el-button>
      </el-form-item>
    </el-form>

    <!--模板列表表格-->
    <el-table :data="tableData" :max-height="tableHeight">
      <!--表头-->
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column prop="temName" label="报表名" align="center"></el-table-column>
      <el-table-column label="操作" align="center">

        <div class="operation_show" slot-scope="scope" >
          <el-button type="success" icon="el-icon-s-custom" @click="fillForm(scope.row.id, scope.row.temName)">填写报表</el-button>
        </div>
      </el-table-column>
    </el-table>

    <!--分页块-->
    <div>
      <el-pagination
          style="margin-top: 10px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[10,20,30,40,50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


    <!--    用户填写对话框-->
    <el-dialog :title="this.formName" :visible.sync="fillFormVisible" width="50%" center @close="handleClose">
      <!--新建模板信息表单-->
      <el-form :model="Form" ref="Form" >

        <!--部门级联选择器-->
        <el-form-item label="部门名称：" label-width="160px" >
          <!--使用子组件-->
          <DepSelect v-if="flushC"></DepSelect>
        </el-form-item>
        <!--医疗机构选择器-->
        <el-form-item  label-width="160px">
          <template slot="label">
            <el-tooltip placement="bottom" style="margin-right: 5px">
              <div slot="content">没有找到您的医疗机构？请联系管理员</div>
              <i class="el-icon-question icon-color"></i>
            </el-tooltip>
            <span>医疗机构代码：</span>
          </template>
          <HospitalSearch v-if="flushC"></HospitalSearch>
        </el-form-item>
        <!--医院地址输入框-->
        <el-form-item label="医院地址：" label-width="160px" prop="address" :rules = "{required: true, message: '请输入医院地址', trigger: 'blur'}">
          <el-input v-model="Form.address" placeholder="请输入医院地址" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--医生人数输入框-->
        <el-form-item label="医生人数：" label-width="160px" prop="doctornum" :rules = "{type: 'number' ,required: true, message: '请输入医生人数格式为数字', trigger: 'blur'}">
          <el-input v-model.number="Form.doctornum" placeholder="请输入医生人数" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--法人代表输入框  可选-->
        <el-form-item label="法人代表：" label-width="160px" prop="repr" v-if="reveal[0]" :rules = "{required: true, message: '请输入法人代表', trigger: 'blur'}">
          <el-input v-model="Form.repr"  placeholder="请输入法人代表" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院类别输入框  可选-->
        <el-form-item label="医院类别：" label-width="160px" prop="categ" v-if="reveal[1]" :rules = "{required: true, message: '请输入医院类别', trigger: 'blur'}">
          <el-input v-model="Form.categ" placeholder="请输入医院类别" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院主办单位性质输入框  可选-->
        <el-form-item label="医院主办单位性质：" label-width="160px"prop="pro" v-if="reveal[2]" :rules = "{required: true, message: '请输入医院主办单位性质', trigger: 'blur'}">
          <el-input v-model="Form.pro"  placeholder="请输入医院主办单位性质" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院经济类型输入框  可选-->
        <el-form-item  label="医院经济类型：" label-width="160px" prop="eco" v-if="reveal[3]" :rules = "{required: true, message: '请输入医院经济类型', trigger: 'blur'}">
          <el-input v-model="Form.eco" placeholder="请输入医院经济类型" clearable autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--新建模板对话框按钮-->
      <div slot="footer">
        <!--关闭对话框按钮-->
        <el-button @click="fillFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveForm">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import DepSelect from "@/components/DepSelect";
import HospitalSearch from "@/components/HospitalSearch";
export default {
  name: "UserReportList",
  components: {HospitalSearch, DepSelect},
  data (){
    return{
      currentPage:1,
      total:0,
      temName:'',
      pagenum:1,
      pagesize:10,
      tableData:[],
      tableHeight:"",
      fillFormVisible: false,
      flushC: false,
      Form: {},
      reveal:[false,false,false,false],
      formName: '',
    }
  }
  ,
  created() {
    this.load()
    this.getTableHeight(); //网页创建时获得表格高度
    this.$bus.$on('transferId',(data)=>{
      console.log('我是dl组件，收到了数据',data)
      this.Form.did = data
    })
    this.$bus.$on('transferHcode',(data)=>{
      console.log('我是hsearch组件，收到了数据',data)
      this.Form.hcode = data
    })
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods: {
    handleClose(){
      this.flushC = false
    },

    load() {
      this.request.get("/template/findAllForU", {params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize,
          uid: this.$store.state.id,
          temname: this.temName
        }} )
          .then(res => {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })
    },

    fillForm(id, name) {
      this.$nextTick(() => (this.flushC = true))
      this.Form = {}
      this.request.get('/template/getById/' + id).then(res=>{
        if (res.data.code === '200'){
          this.formName = name
          this.reveal[0] = res.data.data.isRepr
          this.reveal[1] = res.data.data.isCateg
          this.reveal[2] = res.data.data.isPro
          this.reveal[3] = res.data.data.isEco
          this.Form.tid = id
          this.Form.uid = this.$store.state.id
          this.Form.temname = name
          this.fillFormVisible = true
        }
      })

    },

    //保存表单
    saveForm(){
      this.$refs['Form'].validate((valid) =>{
            if(valid){
              this.request.post('/report/fillForm',this.Form).then(res=>{
                if (res.data.code === '200'){
                  this.$message.success("填写表单成功！")
                  this.load()
                  this.fillFormVisible = false
                  this.flushC =false
                }
                else
                  this.$message.error(res.data.msg)
              })
            }
      })

    },
    //分页查询
    handleSizeChange(pagesize)
    {   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    }
    ,
    handleCurrentChange(pagenum)
    {   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()

    }
    ,

    //计算table高度(动态设置table高度)
    getTableHeight()
    {
      let tableH = 206; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },

  },
  beforeDestroy() {
    this.$bus.$off('transferId')
    this.$bus.$off('transferHcode')
  },
}
</script>

<style scoped>

/*将表格操作列设为光标停留时显示*/
.operation_show{
  display: none;
}
.el-table__body tr:hover > td .operation_show{
  display: block;
}

</style>